<template>
	<view class="container">
		<!-- <view class="status_bar"></view> -->
		<!-- toubu -->
		<view class="header">
			<view class="select-box">
				<select>
					<option>待办事项</option>
					<option>O A</option>
					<option>协同办公</option>
					<option>用友NC</option>
					<option>云 天</option>
					<option>赛马物联</option>
				</select>
			</view>
			<view class="search-box">
				<image @click="search" class="searchs" src="../../static/zxcvbnd.png"></image>
			</view>
		</view>
		<!-- 主要内容 OA-->
		<view class="body">
			<view class="section" v-for="(item, index) in daiban" @click="details">
				<view class="mian">
					<view class="titel">{{item.title}}</view>
					<view class="dian">
						<view class="dians"></view>
						<view class="statu">OA</view>
					</view>
				</view>
				<view class="content">

				</view>
				<view class="mians">
					<view class="dianr">
						<view>
							<image class="uimg" :src="icon" mode=""></image>
						</view>
						<view class="username">{{item.senderName}}</view>
					</view>
					<view class="data">{{item.createTime}}</view>
				</view>
			</view>
			<!-- 中间内容--NC -->
			<!-- <view class="section">
				<view class="mian">
					<view class="titel">关于半年度冲刺周六正常上班通知</view>
					<view class="dian">
						<view class="dians yi"></view>
						<view class="statu">NC</view>
					</view>
				</view>
				<view class="content">
					如果,我多一张船票,你会不会跟我一起走?如果,我多一张船票,你会不会跟我一起走?如果,我多一张船票,你会不会跟我一起走?如果,我多一张船票,你会不会跟我一起走?如果,我多一张船票,你会不会跟我一起走?
				</view>
				<view class="mians">
					<view class="dianr">
						<view class="">
							<image class="uimg" src="../../static/v2_q8tr5t.jpg" mode=""></image>
						</view>
						<view class="username">tom</view>
					</view>
					<view class="data">2021/08/20 12:12:12</view>
				</view>
			</view> -->
			<!-- 中间内容--物联 -->
			<!-- <view class="section">
				<view class="mian">
					<view class="titel">关于半年度冲刺周六正常上班通知</view>
					<view class="dian">
						<view class="dians li"></view>
						<view class="statu">物联</view>
					</view>
				</view>
				<view class="content">
					如果,我多一张船票,你会不会跟我一起走?如果,我多一张船票,你会不会跟我一起走?如果,我多一张船票,你会不会跟我一起走?如果,我多一张船票,你会不会跟我一起走?如果,我多一张船票,你会不会跟我一起走?
				</view>
				<view class="mians">
					<view class="dianr">
						<view class="">
							<image class="uimg" src="../../static/v2_q948ro.jpg" mode=""></image>
						</view>
						<view class="username">tom</view>
					</view>
					<view class="data">2021/08/20 12:12:12</view>
				</view>
			</view> -->
			<!-- 中间内容--云天 -->
			<!-- <view class="section">
				<view class="mian">
					<view class="titel">关于半年度冲刺周六正常上班通知</view>
					<view class="dian">
						<view class="dians mi"></view>
						<view class="statu">云天</view>
					</view>
				</view>
				<view class="content">
					如果,我多一张船票,你会不会跟我一起走?如果,我多一张船票,你会不会跟我一起走?如果,我多一张船票,你会不会跟我一起走?如果,我多一张船票,你会不会跟我一起走?如果,我多一张船票,你会不会跟我一起走?
				</view>
				<view class="mians">
					<view class="dianr">
						<view class="">
							<image class="uimg" src="../../static/v2_q948ro.jpg" mode=""></image>
						</view>
						<view class="username">tom</view>
					</view>
					<view class="data">2021/08/20 12:12:12</view>
				</view>
			</view> -->


		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				daiban: '',
				icon: 'https://liangcang-material.alicdn.com/prod/upload/3916be5165cb4d4aadae49a5a34400e6.jpg'

			};
		},
		onShow() {
			this.$request.get('/taskcenters/taskcenter/list?pageNum=1&pageSize=10')
				.then(res => {
					console.log(res.data)
					console.log(res.data);
					this.daiban = res.data.rows
					console.log(this.daiban)
					if (res.data.code === 401) {
						uni.reLaunch({
							url: '../index/index'
						})
					}
				})
		},
		onLoad() {
			var loginRes = this.checkLogin();
			if (!loginRes) {
				return false;
			}
		},
		methods: {
			details() {
				// console.log(e)
				// uni.setStorageSync("detailsInfo", item)
				uni.navigateTo({
					url: '../agencydetails/agencydetails'
				});
			},
			search() {
				uni.navigateTo({
					url: "../search/search"
				})
			}
		},
	}
</script>X

<style lang="scss">
	* {
		// border: 1rpx solid;
	}

	page {
		display: -webkit-box;
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		display: flex;
		min-height: 100vh;
		flex-direction: column;

	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1;
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		background-color: white;
		padding: 100rpx 15rpx 0rpx 15rpx;
	}

	.select-box {
		height: 50rpx;
		margin-left: 18rpx;
	}

	select {
		border: 0;
		border-radius: 10rpx;
		// padding: 5rpx 10rpx;
		outline: none;
		font-size: 32rpx;
		font-weight: 500;
		color: #1F85EC;
	}

	.search-box {
		height: 50rpx;
		width: 50rpx;
		margin: 0 20rpx;

	}

	.searchs {
		height: 50rpx;
		width: 50rpx;
		// z-index: 99;
	}

	.body {
		// position: fixed;
		background: #EFEFF4;
		height: 100vh;
		overflow-y: scroll;
		margin-top: 180rpx;

		.section {
			margin: 20rpx 30rpx 20rpx 30rpx;
			background-color: white;
			padding: 20rpx 20rpx 0rpx 20rpx;
			border-radius: 20rpx;

			.mian {
				display: flex;
				justify-content: space-between;

				.titel {
					font-size: 26rpx;
				}

				.dian {
					display: flex;
					width: 100rpx;

					.dians {
						width: 20rpx;
						height: 20rpx;
						border-radius: 100%;
						background-color: #1F85EC;
						margin: 6rpx 10rpx;
					}

					.yi {
						background-color: #FFCC00;
					}

					.li {
						background-color: #007AFF;
					}

					.mi {
						background-color: #0CCB82;
					}

					.statu {
						font-size: 24rpx;
						color: #7e7e7e;
					}
				}
			}

			.content {
				font-size: 24rpx;
				margin: 25rpx 0;
				color: #9f9f9f;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				display: -moz-box;
				-moz-line-clamp: 2;
				-moz-box-orient: vertical;
				word-wrap: break-word;
				word-break: break-all;
				white-space: normal;
			}

			.mians {
				border-top: 1rpx solid #eaeaea;
				padding-top: 10rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				.dianr {
					display: flex;

					.uimg {
						width: 40rpx;
						height: 40rpx;
						border-radius: 100%;
						margin-right: 20rpx;
					}

					.username {
						font-size: 28rpx;
						color: #999999;
					}
				}

				.data {
					font-size: 24rpx;
					line-height: 50rpx;
					color: #999999;
				}
			}
		}
	}
</style>
